<template>
    <div class="validate simple-page">
    	<van-nav-bar v-if="title" :title="title" />
        <van-cell-group :border="false" v-show="errorMessage === ''">
            <van-field type="number" style="line-height:42px;" clearable v-model="telephone" placeholder="请输入手机号">
                <template slot="label">
                    <img src="~assets/img/member/tel.png" />
                </template>
            </van-field>
            <van-field type="number" style="padding-top:30px;" v-model="verifyCode" center clearable placeholder="请输入短信验证码">
                <template slot="label">
                    <img src="~assets/img/member/validate.png" />
                </template>
                <van-button class="send-button" @click="sendMessage" :disabled="telephone == '' || !isCanSend" slot="button" size="small" type="primary">{{ isCanSend ? '发送验证码' : `重新发送(${sendIntervalTime}s)` }}</van-button>
            </van-field>
            <van-field class="confirm-button-box">
                <van-button class="confirm-button" slot="button" :loading="loading" @click="handleSubmit">确认</van-button>
            </van-field>
        </van-cell-group>
        <errorTips :error-message="errorMessage" v-show="errorMessage !== ''"></errorTips>
    </div>
</template>

<script>
import { telRule } from '@/utils/validate.js'
import { getVerification, identityVerification } from '@/api/member/index';
import errorTips from '@/components/error-tips'

export default {
    components: {
        errorTips
    },
    data () {
        return {
            loading: false,
            telephone: '',
            verifyCode: '',
            isCanSend: true,
            sendDefaultIntervalTime: 60,
            sendIntervalTime: 60,
            sendMessageTimer: null,
            errorMessage: '' ,
            verificationCode: false
        }
    },
    computed: {
        title () {
            return this.$route.meta.title
        }
    },
    created () {
    	
	},
    methods: {
        sendMessage () {
            if (this.telephone === '') {
                this.$toast('请填写手机号码')
                return false
            } else if (!telRule.test(this.telephone)) {
                this.$toast('手机号码格式不正确')
                return false
            }
            getVerification(this.telephone).then((rst) => {
                if (rst.status == 0) {
                    this.setSendMessageTimeOver()
                    this.verificationCode = true
                    //this.$toast(rst.message ? rst.message : '验证码已发送')
                } else {
                    this.$toast(rst.message ? rst.message : '发送失败')
                }
            }).catch(() => {
                this.$toast('发送失败')
            })
        },
        setSendMessageTimeOver () {
            if (this.sendMessageTimer) {
                clearInterval(this.sendMessageTimer)
                this.sendIntervalTime = this.sendDefaultIntervalTime
            }
            this.isCanSend = false
            this.sendMessageTimer = setInterval(() => {
                this.sendIntervalTime--
                if (this.sendIntervalTime <= 0) {
                    this.sendIntervalTime = this.sendDefaultIntervalTime
                    clearInterval(this.sendMessageTimer)
                    this.isCanSend = true
                }
            }, 1000)
        },
        handleSubmit () {
        	let data = this.$route.query.data
        	if (this.telephone === '') {
                this.$toast('请填写手机号码')
                return false
            } else if (!telRule.test(this.telephone)) {
                this.$toast('手机号码格式不正确')
                return false
            } else if (this.verifyCode === '') {
                this.$toast('请输入验证码')
                return false
            } else if (!this.verificationCode) {
                this.$toast('请发送验证码')
                return false
            }
            this.loading = true
            identityVerification(this.telephone, this.verifyCode, data).then((rst) => {
                this.loading = false
                if (rst.status == 0) {
                    this.$router.replace({ name: 'goodsList' })
                }else{
                    this.$toast(rst.message ? rst.message : '请求失败')
                }
            }).catch((err) => {
                this.loading = false
                this.$toast('请求异常')
            })
        }
    }
}
</script>

<style lang="scss">
@import "../../styles/color.scss";
.van-dialog .van-button{
	color: $checkBoxColor;
}
.validate {
    .van-cell-group{
        padding: 0 40px;
	    .van-cell__title {
	        max-width: 40px;
	        text-align: left;
	        img {
	            width: 16px;
	            margin-top: -4px;
	            vertical-align: middle;
	        }
	    }
    }
    .confirm-button-box {
        height: 100px;
        .confirm-button {
            position: absolute;
            left: 0;
            top: 50%;
            margin-top: -22px;
            height: 44px;
            width: 100%;
            color: #fff;
            background-color: $errorButtonBg;
        }
    }
    .send-button:not(.van-button--disabled) {
        background-color: $errorButtonBg;
        border-color: $errorButtonBg;
    }
}
@media screen and (max-width: 360px) {
	.validate .van-cell-group{
		padding: 0 20px;
	}
}
</style>